<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查询数据页面</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <script src="lib/vue.js"></script>
    <script src="./lib/vue-resource@1.5.2"></script>
</head>

<body>
<div id="app">

    <div>
        <label class="col-sm-2 control-label">
              <input type="text" class="form-control " v-model="startTime"
                   placeholder="输入开始时间格式为yyyy-MM-dd">
        </label>
        <label class="col-sm-2 control-label">
            <input type="text" class="form-control" v-model="endTime"
                   placeholder="输入结束时间格式yyyy-MM-dd">
        </label>

        <button type="submit" class="btn btn-default" @click="select">查询</button>
    </div>
    <table class="table  table-hover table-bordered">
        <thead style="caret-color: red">
        <tr>
            <th style="caret-color: red">设备编号</th>
            <th>请求用户账号</th>
            <th>请求开始时间</th>
            <th>请求结束时间</th>
            <th>请求的图片</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="item in list[0]" :key="item.imageId1400">
            <td>{{ item.deviceId }}</td>
            <td>{{ item.username }}</td>
            <td>{{ item.createTime |dateFilt}}</td>
            <td>{{ item.updateTime |dateFilt}}</td>
            <td><img :src="getImgUrl(item.imageId)" height="200px" width="200px"/></td>
        </tr>

        </tbody>
    </table>
</div>
<script>
    Vue.http.headers.common['trustToken'] = '93978ffb50540258b76230b654fa50d58a0bf380';
    Vue.http.options.root = ""
    Vue.filter('dateFilt', function (data) {
        if (data == undefined) {
            return '没有返回数据'
        } else {
            var date = new Date(data)

            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            var h = date.getHours()
            var m1 = date.getMinutes()
            var s = date.getSeconds()
            return `${y}-${m}-${d} ${h}:${m1}:${s}`
        }


    })

    var vm = new Vue({
        el: '#app',
        data: {
            startTime: '',
            endTime: '',
            list: []
        },
        methods: {
            select() {
                if (this.startTime != null && this.endTime != null) {
                    var url = "http://32.82.1.104:8910/getFace/getFaceLog?startTime=" + this.startTime + "&endTime=" + this.endTime;
                    console.log(url)
                    this.$http.get(url).then(
                        function (res) {
                            this.list = res.body.map(function (ele) {
                                return {
                                    deviceId: ele.deviceId,
                                    username: ele.username,
                                    createTime: createTime,
                                    updateTime: updateTime,
                                    imageId: ele.imageId
                                }

                            })
                        })

                } else {
                    alert("信息不完整")
                }


            },
            getImgUrl(data) {
                return "http://32.82.1.104:5555/helmetProxy/getFile?id=" + data
            }
        },
        beforeMount() {

            this.$http.get("http://32.82.1.104:8910/getFace/getFaceLog?startTime=&endTime=").then(
                function (res) {
                    this.list.push(res.body)
                })

        }
    });
    Vue.config.devtools = true
</script>
</body>

</html>